<template>
  <a-modal
      :maskClosable="false"
      :title="title"
      :width="1350"
      :bodyStyle="{
        padding: '0 24px'
      }"
      :visible="visible"
      @cancel="handleCancel"
      cancelText="关闭">
    <a-card
      :bordered="false"
      :bodyStyle="{
        padding: '10px'
      }">
      <!-- 查询区域 -->
      <div class="table-page-search-wrappe">
        <a-form layout="inline" @keyup.enter.native="searchByquery">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="单据来源">
                <j-dict-select-tag placeholder="请选择单据来源" @input="handleDocumentSource" v-model="queryParam.permissionType" dictCode="permission_type"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="queryParam.permissionType == 3">
              <a-form-item label="选择部门">
                <J-select-multiple
                  placeholder="请选择选择部门"
                  :options="getDepartName"
                  showId="id"
                  v-model="queryParam.deptIds"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="queryParam.permissionType == 4">
              <a-form-item label="选择团队">
                <J-select-multiple
                  placeholder="请选择选择团队"
                  :options="getTeamName"
                  showId="id"
                  v-model="queryParam.teamIds"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="单据编号" class="form-item">
                <j-input placeholder="请输入单据编号" v-model="queryParam.billNo"></j-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="queryParam.permissionType != 4">
              <div class="capital">
                <a-form-item label="调入团队">
                  <select-team-input
                      v-model="queryParam.allotInTeam" :tdlx="3" disabled/>
                </a-form-item>
              </div>
              </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="queryParam.permissionType != 4">
              <div class="capital">
                <a-form-item label="调出团队">
                  <select-team-input
                      v-model="queryParam.allotOutTeam" :tdlx="3"/>
                </a-form-item>
              </div>
            </a-col>
            <template v-if="toggleSearchStatus">
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="申请金额">
                  <a-input-number placeholder="请输入最小值" class="query-group-cust" :precision="2" v-model="queryParam.applyMoney_begin" style="width:calc(50% - 15px);"></a-input-number>
                  <span class="query-group-split-cust"></span>
                  <a-input-number placeholder="请输入最大值" class="query-group-cust" :precision="2" :min="queryParam.applyMoney_begin" v-model="queryParam.applyMoney_end" style="width:calc(50% - 15px);"></a-input-number>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <div class="capital">
                  <a-form-item label="调入公司">
                    <select-Company-input v-model="queryParam.allotInUnit" />
                  </a-form-item>
                </div>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <div class="capital">
                  <a-form-item label="调出公司">
                    <select-Company-input v-model="queryParam.allotOutUnit" />
                  </a-form-item>
                </div>
              </a-col>
            </template>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchByquery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset(1)" icon="reload" style="margin-left: 8px">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->

      <!-- table区域-begin -->
      <div>
        <a-table
          ref="table"
          rowKey="id"
          :scroll="{x:scrollX}"
          :components="draggableComponent"
          bordered
          :columns="dragResizeColumns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange"
          class="j-table-force-nowrap"
          wrapClassName="ant-modal-cust-warp">
          <span slot="action" slot-scope="text, record">
            <a @click="onDetail(record)">详情</a>
          </span>
        </a-table>
      </div>

      <!-- 详情开始 -->
      <a-modal
        :maskClosable="false"
        title="资金调拨单详情"
        :width="1350"
        :bodyStyle="{
          padding: '0 24px'
        }"
        :visible="visibleDetail"
        @cancel="handleCancelDetail"
        cancelText="关闭">
        <ErpCapitalAllotForm ref="realRepaymentForm" :disabled="true" normal></ErpCapitalAllotForm>
        <template slot="footer">
          <a-button @click.stop="handleCancelDetail">关闭</a-button>
        </template>
      </a-modal>
      <!-- 详情结束 -->
      
    </a-card>
    <template slot="footer">
      <a-button @click.stop="()=>{visible=false}">关闭</a-button>
    </template>
  </a-modal>
</template>

<script>

  import { filterObj } from '@/utils/util';
  import { getAction } from '@/api/manage'
  import ErpCapitalAllotForm from '@/views/erp/finance/capitalAllot/modules/ErpCapitalAllotForm.vue'
  import { DragResizable } from '@/mixins/DragResizable'
  import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
  import SelectCompanyInput from '@/views/scy/components/SelectCompanyInput'
  import { mapGetters } from 'vuex';

  export default {
    name: 'ErpFinanceRepaymentSlipPenetrate',
    components: {
      ErpCapitalAllotForm,
      SelectTeamInput,
      SelectCompanyInput
    },
    mixins: [DragResizable],
    data() {
      return {
        visibleDetail: false,
        title: '资金调拨申请单明细',
        queryParam: {
          searchMonth: '',
          allotInTeam: '',
          permissionType: '1'
        },
        getDepartName: [], // 我的部门
        getTeamName: [], // 我的团队
        toggleSearchStatus: false,
        dragResizeColumns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:50,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'单据编号',
            align:"center",
            dataIndex: 'billNo',
            width:180,
            ellipsis: true,
          },
          {
            title:'申请金额(元)',
            align:"center",
            dataIndex: 'applyMoney',
            width:120,
            ellipsis: true,
          },
          {
            title:'预计归还日期',
            align:"center",
            dataIndex: 'anticipateReturnDate',
            ellipsis: true,
            width:120,
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'调入团队',
            align:"center",
            width:180,
            dataIndex: 'allotInTeam_dictText',
            ellipsis: true
          },
          {
            title:'调出团队',
            align:"center",
            dataIndex: 'allotOutTeam_dictText',
            width:180,
            ellipsis: true
          },
          {
            title:'资金用途',
            align:"center",
            dataIndex: 'purpose',
            width:150,
            ellipsis: true
          },
          {
            title:'流程状态',
            align:"center",
            dataIndex: 'bpmStatus_dictText',
            width:150,
            ellipsis: true
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            width:80,
            scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action' }
          }
        ],
        url: {
          urlList: '/api/erp/finance/capitalAllot/erpCapitalAllot/popList',
        },
        dataSource: [],
        loading: false,
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isorter: {
          column: 'createTime',
          order: 'desc'
        },
        visible: false,
        dictOptions: {},
      }
    },
    created() {
      this.loadData();
      // 该方法触发屏幕自适应
      this.resetScreenSize();
      this.refresh();
      // 加载数据字典信息
      this.initDictConfig();
      this.dragResizeColumnswidth = this.dragResizeColumns.map(val => {
        return val.width
      })
    },
    computed: {
    },
    methods: {
      ...mapGetters(['userInfo']), // 用户信息
      // 点击获取单据来源
      handleDocumentSource () {
        if (this.queryParam.permissionType == 3) {
          // 本部门
          if (this.queryParam && this.queryParam.teamIds) {
            this.queryParam.teamIds = ''
          }
          this.getDepartName = []
          this.getTeamName = []
          var params1 = {
            username: this.userInfo().username
          }
          getAction('/api/erpmng/sys/sysDepart/getDepartByUserName', params1).then((res) => {
            if (res.success) {
              this.getDepartName = res.result
            } else {
              this.$message.warning('未查询到部门信息')
            }
        })
        } else if (this.queryParam.permissionType == 4) {
          // 本团队
          if (this.queryParam && this.queryParam.deptIds) {
            this.queryParam.deptIds = ''
          }
          this.getDepartName = []
          this.getTeamName = []
          var params2 = {
            userId: this.userInfo().empId
          }
          getAction('/api/erp/omc/teammanager/erpOmcTeamManager/getTeamByUserId', params2).then((res) => {
            if (res.success) {
              console.log("获取团队信息", res);
              this.getTeamName = res.result
            } else {
              this.$message.warning('未查询到团队信息')
            }
          })
        } else {
          this.queryParam.teamIds = ''
          this.queryParam.deptIds = ''
          this.getDepartName = []
          this.getTeamName = []
        }
      },
      initDictConfig() {
      },
      onDetail(record) {
        this.visible = false
        this.visibleDetail = true
        this.$nextTick(()=>{
          this.$refs.realRepaymentForm.edit(record);
        });
      },
      handleCancelDetail() {
        this.visible = true
        this.visibleDetail = false
      },
      handleToggleSearch() {
        this.toggleSearchStatus = !this.toggleSearchStatus;
      },
      handleTableChange(pagination, filters, sorter) {
        //TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        }
        this.ipagination = pagination;
        this.loadData();
      },
      loadData(arg) {
        // 加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();// 查询条件
        getAction(this.url.urlList, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;
            // 判断是否当前页没有数据且不为第一页
            if (this.dataSource.length == 0 && this.ipagination.current != 1) {
              this.ipagination.current = this.ipagination.current - 1
              this.loadData(this.ipagination.current - 1);
            } else {
              this.loading = false
            }

          }
        })
      },
      getQueryParams() {
        let param = Object.assign({}, this.queryParam, this.isorter);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },
      getQueryField() {
        let str = 'id,';
        for (let a = 0; a < this.dragResizeColumns.length; a++) {
          str += ',' + this.dragResizeColumns[a].dataIndex;
        }
        return str;
      },
      searchReset() {
        let that = this;
        Object.keys(that.queryParam).forEach(function (key) {
          if(key=='searchMonth'||key=='allotInTeam'){
          } else if(key=='permissionType'){
            that.queryParam.permissionType = '1';
          } else {
            that.queryParam[key] = null;
          }
        });
        that.loadData(1);
      },
      searchByquery() {
        this.loadData(1);
      },
      refresh() {
        this.loading = true
      },
      open(record) {
        console.log(record);
        this.loadData(1);
      },
      // 触发屏幕自适应
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 500) {
          this.scrollTrigger = { x: 800 };
        } else {
          this.scrollTrigger = {};
        }
      },
      handleCancel() {
        this.visible = false;
      },
      handleOk() {
        this.handleCancel();
      },
    }
  }
</script>
<style scoped lang="less">
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .anty-img-wrap {
    height: 25px;
    position: relative;
  }

  .anty-img-wrap > img {
    max-height: 100%;
  }
  /deep/ .capital .ant-form-item-control-wrapper{
    overflow: hidden;
  }
</style>